<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>返回顶部示例</title>
    <style>
        /* ========== 全局样式 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
        }

        /* ========== 顶部导航 ========== */
        .header {
            /* 关键：固定定位 + 过渡动画 */
            position: fixed;
            top: -80px;
            /* 初始隐藏在上面 */
            left: 0;
            width: 100%;
            background-color: #333;
            padding: 20px 0;
            transition: top 0.3s ease;
            /* 平滑过渡 */
            z-index: 1000;
            /* 确保在最上层 */
        }

        .header ul {
            list-style: none;
            display: flex;
            justify-content: center;
            gap: 30px;
        }

        .header a {
            color: white;
            text-decoration: none;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 5px;
            transition: background 0.3s;
        }

        .header a:hover,
        .header a.active {
            background-color: #ff6700;
        }

        /* ========== 返回顶部按钮 ========== */
        .back-to-top {
            position: fixed;
            bottom: 50px;
            right: 50px;
            padding: 12px 24px;
            background-color: #ff6700;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;

            /* 初始隐藏 */
            display: none;
            opacity: 0;

            /* 关键：添加过渡动画 */
            transition: opacity 0.3s ease;
            z-index: 999;
        }

        .back-to-top:hover {
            background-color: #e55a00;
            transform: translateY(-2px);
            /* 悬停时上浮 */
        }

        /* ========== 内容区域 ========== */
        .content {
            width: 1000px;
            height: 4000px;
            background: linear-gradient(to bottom, #ff6700, #ffaa00);
            margin: 0 auto;
            padding: 100px 20px 20px;
            color: white;
            font-size: 20px;
        }

        .sk {
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin-top: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
            font-size: 24px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <!-- 顶部导航 -->
    <div class="header">
        <nav class="tab-nav">
            <ul>
                <li class="tab-item"><a href=" " class="active">百货</a></li>
                <li class="tab-item"><a href="#">亏贼bro</a></li>
                <li class="tab-item"><a href="#">伤心光棍</a></li>
                <li class="tab-item"><a href="#">没有蛀牙</a></li>
                <li class="tab-item"><a href="#">纯纯神人</a></li>
            </ul>
        </nav>
    </div>

    <!-- 主要内容 -->
    <div class="content">
        <h1>父级元素</h1>
        <p>↓ 向下滚动试试 ↓</p>
        <div class="sk">秒杀模块</div>
    </div>

    <!-- 返回顶部按钮 -->
    <button class="back-to-top">返回顶部</button>

    <script>
        // ========== 1. 导航点击事件（修复版） ==========
        // 获取所有导航链接（注意选择器要加空格）
        const navLinks = document.querySelectorAll('.header .tab-item a');

        // 为每个链接添加点击事件
        navLinks.forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault(); // 阻止默认跳转（因为是示例）
                console.log('点击了：' + this.textContent);

                // 移除所有active类
                navLinks.forEach(a => a.classList.remove('active'));
                // 给当前点击的添加active类
                this.classList.add('active');
            });
        });

        // ========== 2. 滚动控制header和按钮 ==========
        const sk = document.querySelector('.sk');
        const header = document.querySelector('.header');
        const backToTopBtn = document.querySelector('.back-to-top');

        window.addEventListener('scroll', function () {
            const scrollTop = document.documentElement.scrollTop;

            // 控制header显示/隐藏
            if (scrollTop >= sk.offsetTop) {
                header.style.top = '0';
            } else {
                header.style.top = '-80px';
            }

            // 控制返回顶部按钮（简化版）
            if (scrollTop > 300) {
                backToTopBtn.style.display = 'block';
                // 用requestAnimationFrame确保动画流畅
                requestAnimationFrame(() => {
                    backToTopBtn.style.opacity = '1';
                });
            } else {
                backToTopBtn.style.opacity = '0';
                setTimeout(() => {
                    backToTopBtn.style.display = 'none';
                }, 300); // 等待动画完成后再隐藏
            }
        });

        // ========== 3. 返回顶部功能 ==========
        backToTopBtn.addEventListener('click', function () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'  // 平滑滚动
            });
        });
    </script>
</body>

</html>